<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-cn">
<head>
<title>系统登录后台</title>
<LINK REL="SHORTCUT ICON" HREF="<%=basePath %>web/images/e5/logo.jpg">
<link rel="stylesheet" type="text/css" href="<%=basePath %>web/css/global.css">
<link rel="stylesheet" type="text/css" href="<%=basePath %>web/css/login.css">
<script type="text/javascript"
	src="<%=basePath %>web/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript"
	src="<%=basePath %>web/js/jquery.cookie.js"></script>
</head>
<body>

	<div class="pa login-wrapper" role="main">
	<div  ><img class="fl" style="margin-right:40px;border-right:2px solid #ccc" src="web/images/e5/E5_logo.png"/></div>	
		<div  class="reg-action clearfix" >	
			<form method="post" action="<%=basePath%>ajax/login" id="login-form"
				name="login-form">
				<div class="reg-item pr fl">
					<input name="account" tabindex="1" class="reg-input cp" id="uname"
						type="text" /> <label class="pa reg-label cp" for="uname">User ID</label>
					<p class="pa reg-tip"></p>
				</div>
				<div class="reg-item pr fl">
					<input name="account" tabindex="2" class="reg-input cp" id="passwd"
						type="password" /> <label class="pa reg-label cp" for="passwd">Password</label>
					<p class="pa reg-tip"></p>
				</div>
				<div class="fl pr">
					<button class="btn-submit ti fr cp" tabIndex="3" type="button">log in</button>
					<div class="pa btn-master">
						<p class="loading ti">logging</p>
					</div>
				</div>
				<div class="cb login-misc pt10">
					<span><input type="checkbox" name="remember-long"
						id="remember-long"  value="0" /> <label
						class="remember cp">Remember me<em>（Please be careful if this is not your own pc.）</em> </label> </span>
				</div>
			</form>
		</div>
	</div>
	<div id="footer" class="pa tc pb5">E5 &copy;2012 </div>
</body>
<script>
	$(function(s) {
		$('body').focus();
		$('.reg-action .reg-input').each(function() {
			var items = $(this).parent('.reg-item');
			if ($(this).val()) {
				items.addClass("focus");
			}

			$(this).bind('focus blur', function(event) {
				var type = event.type;//获取事件类型 
				if (type == 'focus') {
					if (items.hasClass('error')) {
						$(this).val("");
						items.removeClass('error');
					}
					items.addClass('focus');
				} else if (!$(this).val()) {
					items.removeClass('focus');
				}
			});
		});

		$(".btn-submit")
				.click(
						function() {
							var wrongTypeName = 0, wrongTypePwd = 0, uname = $(
									"#uname").val(), pwd = $("#passwd").val(), plength = pwd.length, nlength = uname.length, wrongNameHtml = new Array(
									"", "Please input your userid", "User ID is too short", "The length of your userid is too long than 10",
									"Invalid login for the userid or password", "Request is invalid,please try it again"), wrongPwdHtml = new Array(
									"", "Please input your password", "The password's length is too short than 6", "The password is too long than 10",
									"Invalid characters in the password");

							if (nlength == 0) {
								wrongTypeName = 1;
							}
							if (nlength > 0 && nlength < 2) {
								wrongTypeName = 2;
							}
							if (nlength > 10) {
								wrongTypeName = 3;
							}
							if (plength == 0) {
								wrongTypePwd = 1;
							} else {
								var patrn = /^(\w){6,10}$/;
								if (plength < 6)
									wrongTypePwd = 2;
								if (plength > 10)
									wrongTypePwd = 3;
								if (plength > 6 && plength < 10) {
									if (!patrn.exec(pwd))
										wrongTypePwd = 4;
								}
							}

							var inputTip = function(index, tipHtml, tipNum) {
								$(".reg-tip").eq(index).html(tipHtml[tipNum]);
								if (tipNum > 0)
									$(".reg-item").eq(index).addClass("error");
								else
									$(".reg-item").eq(index).removeClass(
											"error");
							};

							inputTip(0, wrongNameHtml, wrongTypeName);
							inputTip(1, wrongPwdHtml, wrongTypePwd);

							if (wrongTypePwd == 0 && wrongTypeName == 0) {
								//$(".reg-input").attr('disabled', true);
								$("#login-form input").attr('disabled', true);
								$('.remember').unbind('click');
								$(".btn-master").addClass("visibility");
								var $params = "userId=" + uname
										+ "&password=" + pwd;
								//alert($params);
								$.ajax({
									url : "Login.action",
									type : 'post',
									data : $params,
									dataType : "json",
									timeout : 6000,
									success : function(data) {
										if(!data.isValid||data.isValid==undefined){
											wrongTypeName = 4;
											inputTip(0, wrongNameHtml,wrongTypeName);
											$("#login-form input").attr('disabled',
													false);
											$('.remember').bind('click',
													function() {
														checkClick();
													});
											$(".btn-master").removeClass(
													"visibility");
										}else {
											//alert($('#remember-long').attr('checked'));
											if ($('#remember-long').attr('checked')) {
												$.cookie('remember','true',{ expires: 7});
												$.cookie('email',uname,{ expires: 7});
												$.cookie('password',pwd,{ expires: 7});												
											}else{
												$.cookie('remember','false');
												$.cookie('email','',{ expires: -1});
												$.cookie('password','',{ expires: -1});	
											}
											

											location.href="<%=basePath%>listuser.action"; 									

										}
									
									},
									error : function() {
										wrongTypeName = 5;
										inputTip(0, wrongNameHtml,
												wrongTypeName);
										$("#login-form input").attr('disabled',
												false);
										$('.remember').bind('click',
												function() {
													checkClick();
												});
										$(".btn-master").removeClass(
												"visibility");
									}
								});
								
							}
						});

		var checkClick = function() {
			if ($('#remember-long').attr('checked')) {
				//$('#remember-long').attr('checked', false);
				$('#remember-long').val("1");
			} else {
				//$('#remember-long').attr('checked', true);
				$('#remember-long').val("0");
			}
			//alert($.cookie("example")); 
		};
		
		$('.remember').bind('click', function() {
			checkClick();
		});
		$("#remember-long").click(function() {
			checkClick();
		});

		$(document).ready(function() { 
			if ($.cookie("remember") == "true") { 		
			
			$("#remember-long").attr("checked", true); 
			$("#uname").val($.cookie("email")); 
			$("#passwd").val($.cookie("password")); 
			} 
		});
	});
</script>
</html>